<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>元素节点、属性节点、文本节点的测试</title>
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">

    <script type="text/javascript">

        window.onload = function(){

            var btnNode = document.getElementsByTagName("button");
            var fruitNode = document.getElementById("fruit");

            //元素节点 ul 为元素节点
            var ulNode = document.getElementsByTagName("ul");

            //属性节点  name="水果" 为属性节点
            var attrNode = document.getElementById("fruit").getAttributeNode("name");
            var attr2Node = document.getElementById("fruit").getAttributeNode("width");
            function createLi (oUl,oValue) {
                var oLi=document.createElement('li');//创建li标签
                oLi.innerHTML=oValue;
                oUl.appendChild(oLi);//appendChild函数为在某父容器下插入
            }

            //文本节点  点我
            var textNode = document.getElementById("btn1").firstChild;  //注意这里获取文本节点的方式


            btnNode[0].onclick = function(){
                createLi(fruitNode,"li标签个数为"+fruitNode.getElementsByTagName('li').length);

                //以下右边注释为运行的结果
                //获取元素节点的三要素:nodeType,nodeName,nodeValue
                createLi(fruitNode,"ul的节点类型为"+ulNode[0].nodeType+"(元素节点)");
                createLi(fruitNode,"ul的节点名称为"+ulNode[0].nodeName);
                createLi(fruitNode,"ul的节点值为"+ulNode[0].nodeValue);

                createLi(fruitNode,"水果ul的name属性的节点类型为"+attrNode.nodeType);
                createLi(fruitNode,"水果ul的name属性的节点名称"+attrNode.nodeName);
                createLi(fruitNode,"水果ul的name属性的节点值"+attrNode.nodeValue);

                createLi(fruitNode,"水果ul的width属性的节点类型为"+attr2Node.nodeType);
                createLi(fruitNode,"水果ul的width属性的节点名称"+attr2Node.nodeName);
                createLi(fruitNode,"水果ul的width属性的节点值"+attr2Node.nodeValue);

                createLi(fruitNode,"已获取该按钮的文本,代码为: var textNode = document.getElementById('btn1').firstChild");
                createLi(fruitNode,"文本节点类型为"+textNode.nodeType);
                createLi(fruitNode,"文本节点名称为"+textNode.nodeName);
                createLi(fruitNode,"文本节点值为:"+textNode.nodeValue);
            }
        }

    </script>
</head>

<body>

节点分三类:
1: 元素节点
2：属性节点
3：文本节点
<ul id="fruit" name="水果" width="80px;">

    <li>苹果</li>
    <li>香蕉</li>
    <li>梨子</li>
    <li>葡萄</li>

</ul>
<button id="btn1">点我</button>
	
<style>
    li{list-style-type: decimal}
</style>
</body>
</html>